<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mini-vue</title>
<script src="/bundle.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
    let child = {
        name: "Child",
        setup(props, context) {
            const ss = vue.inject('ss');
            const state = vue.reactive({
                a: 'ss'
            })            
            return {
                state
            }
        },
        render() {
            return vue.h("div", {}, [this.state.a]);
        },
    }
    let child2 = {
        name: "Child2",
        props: ['msg'],
        setup(props, context) {
            let msg = vue.ref(1);
            vue.provide('ss', 'ddddddddddddddddd');
            let computed1 = vue.computed(() => {
                return msg.value + 1
            })

            // vue.onMounted(() => {
            //     setTimeout(() => {
            //         msg.value = 8
            //     })
            // });
            vue.$nextTick(() => {
                console.log('$nextTick');
            })

            return {
                props,
                msg,
                computed1
            }
        },
        render() {
            return vue.h("div", {}, [vue.h(child), vue.h('p', {}, this.props.msg), vue.h('button', {
                onClick: () => {
                    this.msg += 2;
                },
            }, '点击')]);
        },
    }
    const app = vue.createApp({
        name: "App",
        render() {
            let vnode = vue.h('div', {}, [vue.h(child2, {msg: "your name is child"})]);
            return vnode;
        }
    }).mount(document.getElementById('app'));
</script>
</html>